
<template>
    <van-tabbar v-model="active" class="footer">
        <van-tabbar-item >
          <span>发现</span>
          <template #icon="props">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wangyiyunyinle"></use>
             </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item >
          <span>博客</span>
          <template #icon="props">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xinhao"></use>
             </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item >
          <span>我的</span>
          <template #icon="props">
            <svg class="icon wode" aria-hidden="true">
                <use xlink:href="#icon-yinle"></use>
             </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item >
          <span>关注</span>
          <template #icon="props">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yiguanzhugongyingshang"></use>
             </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item >
          <span>社区</span>
          <template #icon="props">
            <svg class="icon wode" aria-hidden="true">
                <use xlink:href="#icon-xiaoxi1"></use>
             </svg>
          </template>
        </van-tabbar-item>
        
      </van-tabbar>


</template>
<script setup lang="ts">
import{ ref } from 'vue'
const active = ref<number>(0)

</script>

<style  lang="scss" scoped>
.footer{
  background-color: var(--totalbackc);
}
.icon{
    font-size: 16px;
    border-radius: 2px;
}

.wode{
    font-size:14px;
}
span{
    font-size: 12px;
}

</style>
